<template>
    <div class="exam-approval-detail">
      <!-- 考试信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考试信息</h3>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="考试名称">2023年语文类升考试</el-descriptions-item>
          <el-descriptions-item label="考试时间">2023-05-22 14:00:00-16:00:00</el-descriptions-item>
          <el-descriptions-item label="参加限制">考试开始15分钟</el-descriptions-item>
          <el-descriptions-item label="答题时间">120分钟</el-descriptions-item>
          <el-descriptions-item label="交卷限制">考试结束之前15分钟</el-descriptions-item>
          <el-descriptions-item label="考试说明">常规考试</el-descriptions-item>
          <el-descriptions-item label="考试提醒">开启</el-descriptions-item>
          <el-descriptions-item label="提醒时间">15分钟</el-descriptions-item>
          <el-descriptions-item label="考生须知" :span="2">服从考试安排</el-descriptions-item>
        </el-descriptions>
      </el-card>
  
      <!-- 试卷信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考试信息</h3>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="选择试卷">语文试卷</el-descriptions-item>
          <el-descriptions-item label="试卷难度">困难</el-descriptions-item>
          <el-descriptions-item label="试题排序">固定排序</el-descriptions-item>
          <el-descriptions-item label="选项排序">固定排序</el-descriptions-item>
          <el-descriptions-item label="合格分数">60分</el-descriptions-item>
        </el-descriptions>
      </el-card>
  
      <!-- 考生信息表格 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考生信息</h3>
        </div>
        <el-table :data="studentData" border style="width: 100%">
          <el-table-column prop="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="idCard" label="证件" width="200"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
        </el-table>
      </el-card>
  
      <!-- 审批意见表单 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>审批意见</h3>
        </div>
        <el-form :model="approvalForm" label-width="100px">
          <el-form-item label="审批人：">
            <span>孙甜甜</span>
          </el-form-item>
          <el-form-item label="审批结果：" required>
            <el-radio-group v-model="approvalForm.result">
              <el-radio label="通过"></el-radio>
              <el-radio label="拒绝"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见：" required>
            <el-input
              type="textarea"
              v-model="approvalForm.comment"
              placeholder="请输入审核意见"
              :rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item class="form-actions">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        studentData: [
          {
            index: 1,
            name: '张三',
            idCard: '6/26258762368768323',
            gender: '男',
            phone: '13288889999'
          }
        ],
        approvalForm: {
          result: '通过',
          comment: ''
        }
      }
    },
    methods: {
      handleCancel() {
        this.$router.go(-1) // 返回上一页
      },
      handleSubmit() {
        if (!this.approvalForm.comment) {
          this.$message.warning('请输入审核意见')
          return
        }
        
        this.$confirm('确定提交审批意见吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('审批意见已提交')
          // 这里调用API提交审批结果
          // submitApproval(this.approvalForm).then(...)
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .exam-approval-detail {
    padding: 20px;
  }
  
  .info-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }
  
  .form-actions {
    text-align: right;
    margin-top: 20px;
  }
  
  .el-descriptions {
    margin-top: 15px;
  }
  
  .el-table {
    margin-top: 15px;
  }
  </style>